<template>
  <div>
    <div class="achievement-title d-flex justify-content-center">
      <img :src="'achievement-title.png'|imgUrl" alt="">
    </div>
    <div :class="['achievement-list', 'text-center',customClass]">
      <div v-for="(item,i) in achievements" class="achievement-list-item-warpper d-flex justify-content-center" :key="i" @click="onClick(item)">
        <div class="achievement-list-item">
          <img :src="item.icon | storeUrl" />
          <div> {{item.name}} </div>
          <div class="font-color-light font-small text-truncate">{{item.createdTime|date("yyyy-MM-dd")|achievementDesc(item)}}</div>
        </div>
      </div>
    </div>

    <van-dialog :show="showAchievement" @close="onCloseAchievement" use-slot className="vant-dialog-class">
      <div class="achievement-content-warpper ">
        <img :src="'dialog-bg.png'|imgUrl" class="achievement-content-warpper-bg" alt="">
        <div class="achievement-content ">
          <div class="d-flex justify-content-center">
            <image :src="currentItem.icon | storeUrl" class="mt-5" />
          </div>
          <div class="mt-3"> {{currentItem.name}} </div>
          <div class="d-flex justify-content-center">
            <div class="font-small  text-truncate">{{currentItem.desc}}</div>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'

@Component({
  filters: {
    achievementDesc: (value, item) => {
      if (item.owned === true) {
        return value
      }
      return item.desc
    }
  }
})
export default class AchievementList extends Vue {
  @Prop(String) customClass;
  @Prop({ default: [] }) achievements;

  public showAchievement = false;

  public currentItem = {};

  public onCloseAchievement () {
    this.showAchievement = false
  }

  public onClick (item) {
    this.currentItem = item
    this.showAchievement = true
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.achievement-title {
  padding: 0px 0 16px 0;

  image {
    width: 180px;
    height: 30px;
  }
}

.text-truncate {
  text-align :center;
  padding :0 5px;
}

.achievement-list {
  display: grid;
  /* 设置列、行大小 fr单位是等分分配列空间 */
  grid-template-columns: 121px 125px 121px;

  margin:0 4px 0 4px;

  .achievement-list-item-warpper {
    margin-bottom: 10px;
  }

  .achievement-list-item {
    background: #fff;
    border-radius: 4px;
    padding:8px 0;
    width: 108px;

    image {
      width: 72px;
      height: 76px;
    }
  }
}

.achievement-content-warpper {
  padding-bottom: 48px;
  position: relative;

  .achievement-content-warpper-bg {
    height: 275px;
    width: 100%;
    color: #fff;
  }

  .achievement-content {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;

    image {
      width: 114px;
      height: 122px;
    }
  }
}
</style>
